<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate mt20" :model="formValidate"
        label-width="130px" @submit.native.prevent>
        <el-form-item label="主商品信息：" />
        <el-form-item label="商品名称：">{{ formValidate.store_name }}</el-form-item>
        <el-form-item label="商品价格：">{{ formValidate.price }}</el-form-item>
        <el-form-item label="商品封面图：">
          <div class="demo-image__preview">
            <el-image style="width: 60px; height: 60px" :src="formValidate.image"
              :preview-src-list="[formValidate.image]" />
          </div>
        </el-form-item>

        <el-form-item label="选择：">
          <el-select v-model="product_id" filterable multiple clearable @change="changeProduct">
            <el-option v-for="item in productList" :label="item.store_name" :value="item.product_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="product">
          <template v-if="formValidate.manyTabData">
            <el-table border class="tabNumWidth" size="mini" :data="formValidate.manyTabData">
              <el-table-column label="ID" prop="product_id" />
              <el-table-column label="商品名称" prop="store_name" />
              <el-table-column label="商品主图" prop="image">
                <template slot-scope="scope">
                  <div class="demo-image__preview">
                    <el-image style="width: 36px; height: 36px" :src="scope.row.image"
                      :preview-src-list="[scope.row.image]" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="副商品原价格" prop="price" />
              <!-- <el-table-column label="搭配价(主)" prop="total">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.main_price" :step="2"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="搭配价(副)" prop="total">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.assistant_price" :step="2"></el-input-number>
                </template> -->
              </el-table-column>
              <el-table-column label="搭配价  副商品价格=搭配价 - 主商品价格" prop="total">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.total" style="width:75%"></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-form-item>

        <el-form-item style="margin-top:30px;">
          <el-button type="primary" class="submission" size="small" @click="handleSubmit('formValidate')">提交</el-button>
        </el-form-item>
      </el-form>


    </el-card>
  </div>
</template>

<script>
  import {
    productLstApi,
    productDetailApi,
    collocationCreateApi,
    collocationDetailApi
  } from '@/api/product'
  import {
    roterPre
  } from '@/settings'
  export default {
    data() {
      return {
        editData: {},
        formValidate: {
          manyTabData: [],
          store_name: "",
          image: "",
          price: ""
        },
        productList: [],
        product_id: [],
        product: "",
        props: {
          emitPath: false
        },
        isOne: true,
        search: {
          limit: 0,
          page: 15
        },
        count: 100,
        tableData: [{
          date: "xxxx",
          name: "xxxx",
          address: "sddsds"
        }],
        tableLoading: false, //设置table加载动画
        editDialogVisible: false, //编辑弹出
        rules: {},
        fullscreenLoading: false,
        projectData: {
          store_name: "222",
          image: ''
        },
        roterPre: roterPre,
        info:[]
      }
    },
    mounted() {
      this.getList()
      this.getProduct()
      this.getInfo()
    },
    methods: {
      searchQuery() {
        this.search.page = 0
        this.getList()
      },
      getProduct() {
        productLstApi({
          id: this.$route.params.id
        }).then(res => {
          this.productList = res.data.list
          // console.log(this.productList)
        })
      },
      getList() {
        productDetailApi(this.$route.params.id).then(res => {
          this.formValidate.store_name = res.data.store_name
          this.formValidate.image = res.data.image
          this.formValidate.price = res.data.price
        }).catch(err => {
          this.$message.error(res.message);
          this.tableLoading = false;
        })
      },
      getInfo() {
        collocationDetailApi(this.$route.params.id).then(res => {
          let info = []
          this.ids = []
          res.data.forEach((item, index) => {
            info.push({
              product_id: item.assistant_id,
              store_name: item.assistant_name,
              image: item.assistant_image,
              price: item.assistant_price,
              total: item.price
            })
            this.ids.push({
              product_id: item.assistant_id
            })
            this.product_id.push(item.assistant_id)
          })
          this.formValidate.manyTabData = info
          this.product_id = [4]
          console.log(info, "asdfasdfasdfasdfasdf")
        }).catch(err => {
          this.$message.error(res.message);
          this.tableLoading = false;
        })
      },
      changeProduct(val) {
        let This = this
        this.obj = []
        let getTotal = (productId) => {
          let P = 0
          This.formValidate.manyTabData.forEach(itme => {
            if (itme.product_id == productId) {
              P = itme.total
            }
          })
          return P
        }
        for (let i = 0; i < val.length; i++) {
          this.productList.find((item) => { //这里的productList就是数据源
            if (item.product_id == val[i]) {
              this.obj.push({
                product_id: item.product_id,
                store_name: item.store_name,
                image: item.image,
                price: item.price,
                total: getTotal(item.product_id),
              })
            }
          });
        }
        console.log(this.obj ,'????????????????????')
        this.formValidate.manyTabData = this.obj
      },
      handleSubmit() { // insert  update
        // console.log(this.formValidate)
        // console.log(this.formValidate)
        collocationCreateApi(this.$route.params.id, this.formValidate).then(res => {
          this.$message.success(res.message);
          this.$router.push({
            path: this.roterPre + "/product/list"
          });
        }).catch(err => {
          this.$message.error(err.message)
        })
      },
      del(row) {
        let This = this
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //请求接口删除数据
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });

      },
      edit(data) {
        this.editDialogVisible = true
        this.editData = JSON.parse(JSON.stringify(data))
        console.log(data)
      },
      handleSizeChange(val) {
        this.search.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.search.page = val
        this.getList()
      }
    }
  }
</script>

<style>
</style>
